<template>
  <div class="main-page">

    <el-row>
      <el-col :span="16" :offset="4">
        <div class="one-question" v-for="(q,i) in question" :key="q.rank">
          <el-card class="box-card" :key="i" shadow="always" :body-style="{ padding: '60px' }">
            <div slot="header" class="clearfix">
              <span>{{ i + 1 }} : {{ q.content }}</span>
              <!--  <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
            </div>
            <el-row :gutter="5">
              <el-col :span="8" :offset="2">
                <h2 >{{ q.content }}</h2>
              </el-col>
              <el-radio-group v-model="qSelection[q.rank]" @change="getSelectRadio(qSelection)">
                <div class="group" v-for="(item,idx) in q.definition_choices" :key="idx">
                    <el-radio :label="item.rank" border @change="showClick(item.rank)" v-model="item.rank">
                      <span v-html="item.definition.trim()" class="q-item-span-content"></span>
                    </el-radio>
                </div>
                  <el-radio :label="defaultRadio" border v-model="defaultRadio">
                    <span v-html="'不认识'"></span>
                  </el-radio>
              </el-radio-group>

            </el-row>
          </el-card>
        </div>
      </el-col>
    </el-row>


  </div>

</template>

<script>
export default {
  name: 'QuestionTable',
  props: {
    msg: String
  },
  data() {
    return {
      defaultRadio: 'no',
      qSelection: {},
      question: [
        {
          "content": "house",
          "pk": 3208,
          "definition_choices": [
            {
              "pk": 4593,
              "rank": 22,
              "definition": " n. 民族,人,人们,人民,家人"
            },
            {
              "pk": 3208,
              "rank": 155,
              "definition": " n. 房子,住宅,全家人,议院"
            },
            {
              "pk": 4775,
              "rank": 188,
              "definition": " n. (国家)总统,(公司)总裁,总经理,社长(日本)"
            },
            {
              "pk": 1219,
              "rank": 70,
              "definition": " adv. 在中间"
            }
          ],
          //正确的答案
          "rank": 155
        },
        {
          "content": "reason",
          "pk": 4989,
          "definition_choices": [
            {
              "pk": 1680,
              "rank": 264,
              "definition": " n. 学院, 学校，社团，枢机主教团"
            },
            {
              "pk": 1997,
              "rank": 298,
              "definition": " vt. &vi. 决定,作出抉择"
            },
            {
              "pk": 4989,
              "rank": 228,
              "definition": " n. 理由,原因,理智,理性"
            },
            {
              "pk": 3618,
              "rank": 149,
              "definition": " adj. 仁慈的,友好的"
            }
          ],
          "rank": 228
        },
        {
          "content": "baby",
          "pk": 286,
          "definition_choices": [
            {
              "pk": 3790,
              "rank": 420,
              "definition": " v. 听，倾听"
            },
            {
              "pk": 3995,
              "rank": 1267,
              "definition": " n. 膳食,一餐,谷物粗粉"
            },
            {
              "pk": 286,
              "rank": 403,
              "definition": " adj. (形容用法)婴儿的, 过小的"
            },
            {
              "pk": 4332,
              "rank": 472,
              "definition": " n. 官员,军官"
            }
          ],
          "rank": 403
        },
        {
          "content": "track",
          "pk": 6204,
          "definition_choices": [
            {
              "pk": 14154,
              "rank": 1419,
              "definition": " n. 插入,介入,调停"
            },
            {
              "pk": 6204,
              "rank": 837,
              "definition": " n. 小路, 跑道, 轨道, 踪迹; 惯例, 常规"
            },
            {
              "pk": 1301,
              "rank": 1340,
              "definition": " n. 分支,树枝"
            },
            {
              "pk": 2194,
              "rank": 1407,
              "definition": " n. 怀疑,疑惑,不信任"
            }
          ],
          "rank": 837
        },
        {
          "content": "location",
          "pk": 3816,
          "definition_choices": [
            {
              "pk": 10869,
              "rank": 1654,
              "definition": " n. 谈判, 协商"
            },
            {
              "pk": 3816,
              "rank": 1058,
              "definition": " n. 地点,位置"
            },
            {
              "pk": 44,
              "rank": 1921,
              "definition": " adj. 非凡的,特别的,特派的"
            },
            {
              "pk": 1288,
              "rank": 1603,
              "definition": " vt. 烦扰"
            }
          ],
          "rank": 1058
        },
        {
          "content": "extra",
          "pk": 2505,
          "definition_choices": [
            {
              "pk": 6592,
              "rank": 1977,
              "definition": " n. 擦拭,用力打"
            },
            {
              "pk": 1648,
              "rank": 1928,
              "definition": " n. 时钟, 计时器"
            },
            {
              "pk": 2505,
              "rank": 1142,
              "definition": " adj. 额外的"
            },
            {
              "pk": 13560,
              "rank": 1984,
              "definition": " adj. 基因的, 遗传的, 起源的"
            }
          ],
          "rank": 1142
        }
      ]
    };
  },
  methods: {
    getSelectRadio(radio){
      console.log(radio)
      this.preTransferSelection()
      this.checkSelection()
    },
    showClick(radio){
      console.log(radio)
    },
    checkSelection(){
      let res = this.qSelection
      console.log(res)
      let right = []
      for(let k in res){
        if(k == res[k]){
          right.push(k)
          console.log('eq: ' + k)
        }
      }
      this.$store.commit('setCorrectRanks',right)
      console.log('right:' + this.$store.getters.getCorrectRanks)
      // if (res.length === 0
      //     || res.length !== this.$store.getters.getAllQuestions.length
      //     || res.includes(undefined)
      //     || res.includes(null)
      // ){
      //   console.log("题没做完")
      //   return false
      // }
    },
    preTransferSelection(){
      console.log('preTransferSelection')
      this.$emit('transferSelection',this.qSelection)
    }
  },
  mounted() {
    // const params = this.$route.params
    // console.log(params.seq)
    this.question = this.$store.getters.getAllQuestions
  }
}
</script>

